<template>
  <el-dialog
    title="添加附加标号"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="700px"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label-width="120px" label="附加标号名称" prop="name">
        <el-input
          v-model.trim="queryParams.name"
          placeholder="附加标号名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div
      style="
        padding: 10px 20px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      "
      v-if="selectValues.length > 0"
    >
      <div
        style="
          white-space: nowrap;
          font-size: 20px;
          font-weight: bold;
          margin-right: 30px;
        "
      >
        <span>已选择的标号：</span>
      </div>
      <div
        style="gap: 30px; flex-wrap: wrap; display: flex; align-items: center"
      >
        <div style="" v-for="(item, index) in selectValues" :key="item.id">
          <span>{{ item.name }}</span>
          <i
            style="margin-left: 5px; cursor: pointer; color: red"
            @click="deteleItem(index)"
            class="el-icon-close"
          ></i>
        </div>
      </div>
    </div>

    <el-table
      v-loading="loading"
      :data="nameList"
      ref="multipleTable"
      @current-change="handleCurrentChange"
    >
      <el-table-column label="ID" width="40" align="center" prop="id" />
      <el-table-column label="附加标号名称" align="center" prop="name" />
      <el-table-column label="基准价格" align="center" prop="price" />
      <el-table-column fixed="right" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            :disabled="ids.includes(scope.row.id)"
            v-if="multiple"
            @click="addItem(scope.row)"
            type="text"
            size="small"
            >添加</el-button
          >
          <el-button
            v-else
            :disabled="disableIds.includes(scope.row.id)"
            @click="selectItem(scope.row)"
            type="text"
            size="small"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <span slot="footer" class="dialog-footer" v-if="multiple">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listTitle } from "@/api/service/submain";

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true,
    },
    // 禁用的id集合
    disableIds: {
      type: Array,
      default: () => [],
    },
    // 已选择的标号
    defauleValues: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
        name: null,
      },
      total: 0,
      nameList: [],
      multipleSelection: [],
      selectValues: [],
    };
  },
  computed: {
    ids() {
      return this.selectValues.map((item) => item.id);
    },
  },
  methods: {
    deteleItem(index) {
      this.selectValues.splice(index, 1);
    },
    selectItem(row) {
      this.$emit("onSubmit", row);
      this.handleClose();
    },
    addItem(row) {
      if (this.ids.includes(row.id)) {
        this.$message.error("改标号已被添加!");
      } else {
        this.selectValues.push(row);
      }
    },
    handleClick(e) {
      this.getList();
    },
    handleCurrentChange(row) {
      this.rowData = row;
    },
    handleSelect(selection, row) {
      this.rowData = row;
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSubmit() {
      this.$emit("onSubmit", this.selectValues);
      this.handleClose();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClose() {
      this.$emit("onClose");
    },
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      listTitle(this.queryParams).then((res) => {
        this.nameList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        this.multipleSelection = [];
        this.selectValues = JSON.parse(JSON.stringify(this.defauleValues));
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
